import {PC_DEVICE_WIDTH} from "@/constants";
import {computed} from "vue";
import {useWindowSize} from '@vueuse/core'

//响应式屏幕的宽度
const {width} = useWindowSize()
/**
 * 判断当前是否是移动设备
 *
 * 依据当前屏幕宽度是否小于一个指定宽度（1280）
 */
export const isMobileTerminal = computed(() => {
    //正式使用正则匹配的方式
    // return /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    return width.value < PC_DEVICE_WIDTH
})

/**
 * 动态指定rem基准值,最大为40px
 * 根据用户的屏幕宽度，进行一些计算，把计算出来的值赋值给html根标签为fontsize大小
 */
export const useREM = () => {
    const MAX_FONT_SIZE = 40
    //监听 html   文档解析完成事件
    document.addEventListener('DOMContentLoaded', () => {
        //拿到html标签
        const html = document.querySelector('html')
        //计算fontSize
        let fontSize = window.innerWidth / 10
        fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
        //赋值给html
        html.style.fontSize = fontSize + 'px'
    })
}
